<template>
    <div class="page-content">
        <t-pagination
      v-model="current"
      v-model:pageSize="pageSize"
      size="small"
       :page-size-options="pageSizeOptions"
      :total="total"
      @change="onChange"
      @page-size-change="onPageSizeChange"
      @current-change="onCurrentChange"
    />
    </div>
     
</template>
<style scoped>

</style>
<script setup>
import { ref } from 'vue';
const current = ref(1);
const pageSize = ref(10);
const emit = defineEmits(['dataRefresh'])
const {total} = defineProps(['total'])
const pageSizeOptions = [
  { label: '每页 5 条', value: 5 },
  { label: '每页 10 条', value: 10 },
  { label: '每页 20 条', value: 20 },
];

const onPageSizeChange = (size) => {
   
  console.log('page-size:', size);

};

const onCurrentChange = (index, pageInfo) => {

  console.log(pageInfo);
};



const onChange = (pageInfo) => {
  console.log(pageInfo);
  emit('dataRefresh')
};

defineExpose({
    current,
    pageSize,
})

</script>